<template>
  <view class="wrap pad20">
    <sb-back-icon></sb-back-icon>
    <view class="top radius20 shadow-line">
      <view class="item">
        <view class="left">Receiver</view>
        <input
          type="text"
          placeholder-class="line"
          v-model="form.name"
          placeholder="Receiver"
        />
      </view>
      <view class="item">
        <view class="left">PhoneNo</view>
        <input
          type="text"
          placeholder-class="line"
          v-model="form.tel"
          placeholder="PhoneNo"
        />
      </view>
      <view class="item" @tap="showRegionPicker">
        <view class="left">Region</view>
        <input
          disabled
          type="text"
          placeholder-class="line"
          v-model="form.region"
          placeholder="Region"
        />
      </view>
      <view class="item address">
        <view class="left">Address</view>
        <textarea
          type="text"
          placeholder-class="line"
          v-model="form.address"
          placeholder="Address"
        />
      </view>
    </view>
    <view class="bottom radius20 shadow-line">
      <view class="flex j-s a-c">
        <view class="left">
          <view class="set">设置默认地址</view>
          <view class="tips">提醒：每次下单会默认推荐该地址</view>
        </view>
        <view class="right">
          <u-switch color="#369" v-model="form.first" />
        </view>
      </view>
    </view>
    <u-picker
      mode="region"
      ref="uPicker"
      v-model="show"
      @confirm="handleConfirmRegion"
    />
    <view class="marv40">
      <u-button type="primary" :ripple="true" @click="handleSave"
        >Save</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      form: {
        id: 0,
        region: "",
        name: "",
        tel: "",
        address: "",
        first: false,
      },
    };
  },
  onLoad({ id }) {
    console.log(id);
    if (id) {
      this.form.id = id;
      this.getAddressInfo();
    }
  },
  methods: {
    showRegionPicker() {
      this.show = true;
    },
    handleConfirmRegion({ province, city, area }) {
      this.form.region = [province.label, city.label, area.label].join("");
    },
    // 获取原地址信息
    async getAddressInfo() {
      let { success, data } = await this.$get("/cus-address/detail", {
        id: this.form.id,
      });

      if (success) {
        this.form.name = data.name;
        this.form.tel = data.tel;
        this.form.region = data.region;
        this.form.address = data.address;
        this.form.first = !!data.first;
      }
    },
    async handleSave() {
      if (!this.form.name) return this.$msg("请输入Receiver");
      if (!this.$u.test.mobile(this.form.tel))
        return this.$msg("请输入正确联系电话");
      if (!this.form.region) return this.$msg("请输入选择地区");
      if (!this.form.address) return this.$msg("请输入具体地址");
      try {
        let url = "";
        let params = {
          name: this.form.name,
          tel: this.form.tel,
          region: this.form.region,
          address: this.form.address,
          first: ~~this.form.first,
        };
        if (this.form.id) {
          url = "/cus-address/update";
          params.id = this.form.id;
        } else {
          url = "/cus-address/add";
        }
        let { success, data } = await this.$postB(url, params);
        if (success) {
          this.$msg("保存成功", async () => {
            this.$go2("./list?fromOrder=1");
          });
        } else {
          this.$msg(message || "保存失败");
        }
      } catch (e) {
        console.log(e);
        this.$msg("保存失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .line {
  color: $u-light-color;
  font-size: 28rpx;
}

.wrap {
  background-color: #f2f2f2;

  .top {
    background-color: #ffffff;
    padding: 22rpx;

    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;

      .left {
        width: 180rpx;
      }

      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      border-bottom: none;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }

    .site-clipboard {
      padding-right: 40rpx;

      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }

      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;

        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    background-color: #ffffff;
    font-size: 28rpx;

    .tag {
      display: flex;

      .left {
        width: 160rpx;
      }

      .right {
        display: flex;
        flex-wrap: wrap;

        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }

        .plus {
          //padding: 10rpx 0;
        }
      }
    }

    .default {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;

      .tips {
        font-size: 24rpx;
      }

      .right {
      }
    }
  }
}
</style>
